<template>
	<view class="bill">
		<navbar :showBack="true">我的账单</navbar>
		<view class="nav acea-row" :style="'top: '+navH+'rpx;'">
			<view class="item" :class="type==0?'on':''" @click="navHandle(0)">全部</view>
			<view class="item" :class="type==1?'on':''" @click="navHandle(1)">消费</view>
			<view class="item" :class="type==2?'on':''" @click="navHandle(2)">充值</view>
		</view>
		<scroll-view v-if="JSON.stringify(list) != '[]'" scroll-y="true" :style="'height: calc(100vh - '+ h +'rpx );'" class="sign-record" @scrolltolower="loadMore">
			<view class="list" :style="'height: calc(100vh - '+ h2 +'rpx );'">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="data">{{item.time}}</view>
					<view class="listn">
						<view class="itemn acea-row row-between-wrapper" v-for="(item2,index2) in item.list" :key="index2">
							<view>
								<view class="name">{{item2.title}}</view>
								<view>{{item2.add_time}}</view>
							</view>
							<view class="num" :class="item2.pm==1?'':'font-color'">{{item2.pm==1?'+':'-'}}{{item2.number}}</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
		<view class="nolist" v-else :style="'margin-top: '+navH+'rpx;'">
			<view class="pic"><image src="../static/images/empty-box.png" mode=""></image></view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				type:0,
				page:1,
				limit:5,
				status:"loadmore",
				list:[],
				navH:app.globalData.navHeight,
				h:app.globalData.navHeight + 90,
				h2:app.globalData.navHeight + 80
			}
		},
		onLoad(e) {
			console.log(e)
			if(JSON.stringify(e) != "{}"){
				this.type = e.type
			}
			let type = this.type;
			let page = this.page;
			let limit = this.page;
			this.getData(type,page,limit)
		},
		methods:{
			getData:function(type,page,limit){
				const that = this;
				let list = this.list
				that.status = "loading"
				api.user.getBill(type,page,limit).then(e=>{
					if(e.status == 200){
						if(JSON.stringify(e.data) != "[]"){
							that.list = list.concat(e.data)
							that.page = page
							that.type = type
							that.status = "loadmore"
						}else{
							that.status = "nomore"
						}
					}
				})
			},
			navHandle:function(type){
				this.type = type;
				this.list = [];
				let limit = this.limit;
				this.getData(type,1,limit)
			},
			loadMore:function(){
				let type = this.type;
				let page = this.page + 1;
				let limit = this.limit;
				this.getData(type,page,limit)
			}
		}
	}
</script>

<style>
	.bill .nav{
		background-color: #fff;
		height: 90rpx;
		width: 100%;
		line-height: 90rpx;
		position: fixed;
		left: 0;
		z-index: 5;
	}
	.bill .nav .item{
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #282828;
	}
	.bill .nav .item.on{
		color: #e93323;
		border-bottom: 3rpx solid #e93323;
	}
	.bill .sign-record{
		margin-top: 90rpx;
		overflow: hidden;
	}
	.bill .sign-record .list .item .data{
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: #666;
	}
	.bill .sign-record .list .item .listn{
		background-color: #fff;
		font-size: 24rpx;
		color: #999;
	}
	.bill .sign-record .list .item .listn .itemn{
		height: 120rpx;
		border-bottom: 1rpx solid #eee;
		padding-right: 30rpx;
		margin-left: 30rpx;
	}
	.bill .sign-record .list .item .listn .itemn:last-of-type{
		border-bottom:none;
	}
	.bill .sign-record .list .item .listn .itemn .name{
		width: 390rpx;
		font-size: 28rpx;
		color: #282828;
		margin-bottom: 10rpx;
	}
	.bill .sign-record .list .item .listn .itemn .num{
		font-size: 36rpx;
		font-family: 'Guildford Pro';
		color: #16ac57;
	}
	.bill .nolist .pic{
		width: 414rpx;
		height: 336rpx;
		margin: auto;
	}
</style>
